<script setup>
import {computed, ref} from "vue";
import router from "../router/index.js";
import {useRoute} from "vue-router";
import {useAllDataStore} from "../stores/index.js";
const store=useAllDataStore()
const tags=computed(()=>store.state.tags)
const route=useRoute()
const hangleMenu = (tag) => {
  router.push(tag.name)
  store.selectMenu(tag)
}
const hangleClose = (tag,index) => {
//   通过pina管理的
  store.undateMenu(tag)
  if (tag.name!==route.name)return
  if (index===store.state.tags.length){
    store.selectMenu(tags.value[index-1])
    router.push(tags.value[index-1].name)
  }else {
    store.selectMenu(tags.value[index])
    router.push(tags.value[index].name)
  }
}
</script>

<template>
<div class="tags">
  <el-tag v-for="(tag,index) in tags" :key="tag.name" :closable="tag.name!=='home'" :effect="route.name===tag.name ? 'dark': 'plain'" @click="hangleMenu(tag)" @close="hangleClose(tag,index)">{{tag.label}}
  </el-tag>
</div>
</template>

<style scoped lang="less">
.tags{
  margin:20px 0 0 20px ;
}
.el-tag{
  margin-right: 10px;
}
</style>